﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>编辑框自动完成功能</title>
    <link href="jquery-ui-1.10.4.custom/css/ui-lightness/jquery-ui-1.10.4.custom.min.css" rel="stylesheet" />
</head>
<body>
    <input type="text" id="txtLanguage" placeholder="选择您喜欢的编程语言"/>
    <div id="divPairs">
        <input type="text" id="txtLanguageName" placeholder="选择您喜欢的编程语言名称" />
        您选择的语言编号为：<span id="spnLanguageID"></span>
    </div>

    <script src="scripts/jquery-1.11.0.min.js"></script>
    <script src="jquery-ui-1.10.4.custom/js/jquery-ui-1.10.4.custom.min.js"></script>
    <script type="text/javascript">
        var languages = [
            "ActionScript","Ada", "ALGOL","AutoLISP",
            "Basic",
            "C","C#","C++","COBOL","ColdFusion",
            "Dart",  
            "Erlang",
            "F#", "Fortran", 
            "Java", "JavaScript",
            "Lisp", 
            "Objective-C",
            "Pascal", "Perl", "PHP","Prolog", "Python",
            "Ruby", 
            "Smalltalk",
            "Tcl",
            "VBScript"
        ];
        var languagePairs = [
            { "ID": 1, "Name": "ActionScript" }, { "ID": 2, "Name": "Ada" },
            { "ID": 3, "Name": "ALGOL" }, { "ID": 4, "Name": "AutoLISP" },
            { "ID": 5, "Name": "Basic" }, { "ID": 6, "Name": "C" },
            { "ID": 7, "Name": "C#" }, { "ID": 8, "Name": "C++" },
            { "ID": 9, "Name": "COBOL" }, { "ID": 10, "Name": "ColdFusion" },
            { "ID": 11, "Name": "Dart" }, { "ID": 12, "Name": "Erlang" },
            { "ID": 13, "Name": "F#" }, { "ID": 14, "Name": "Fortran" },
            { "ID": 15, "Name": "Java" }, { "ID": 16, "Name": "JavaScript" },
            { "ID": 17, "Name": "Lisp" }, { "ID": 18, "Name": "Objective-C" },
            { "ID": 19, "Name": "Pascal" }, { "ID": 20, "Name": "Perl" },
            { "ID": 21, "Name": "PHP" }, { "ID": 22, "Name": "Prolog" },
            { "ID": 23, "Name": "Python" }, { "ID": 24, "Name": "Ruby" },
            { "ID": 25, "Name": "Smalltalk" }, { "ID": 26, "Name": "Tcl" },
            { "ID": 27, "Name": "VBScript" }
        ];
        $(function(){
            $("#txtLanguage").autocomplete({
                source : languages
            });
            $("#txtLanguageName").autocomplete({
                source: function (request, response) {
                    // 获得用户在编辑框中已输入的值并转成小写
                    var keyword = request.term.toLowerCase();
                    // 检索数组中存在的Name中包含用户输入值的项
                    var results = languagePairs.filter(function (value, index) {
                        if (value.Name.toLowerCase().indexOf(keyword) != -1)
                            return true;
                    });
                    return response(results);
                },
                focus: function () {
                    return false;
                },
                select: function (event, ui) {
                    $("#txtLanguageName").val(ui.item.Name);
                    $("#spnLanguageID").text(ui.item.ID);
                    return false;
                }
            });
            $("#txtLanguageName").data("ui-autocomplete")._renderItem = function (ul, item) {
                return $("<li>")
                    .append("<a>" + item.Name + "</a>")
                    .appendTo(ul);
            };
        })
    </script>
</body>
</html>
